<template>
  <div class="login">
    <h1>
      <img @click="returned" src="../../assets/left/left.png" alt />
      登录
    </h1>

    <table style="border-collapse:separate; border-spacing:0px 10px;">
      <tr>
        <td>用户名：</td>
        <td>
          <input type="text" ref="user1" placeholder="请输入用户名" @input="debounceInput($event)" />
        </td>
      </tr>
      <tr>
        <td>密码：</td>
        <td>
          <input type="pwd" ref="pwd1" placeholder="请输入密码" @input="jieliushijian($event)" />
        </td>
      </tr>
    </table>

    <div style="margin: 16px;">
      <van-button round block type="info" native-type="submit" @click="sub">登录</van-button>
    </div>
    <div style="margin: 16px;">
      <van-button round block type="info" native-type="submit" @click="reg">免费注册</van-button>
    </div>
  </div>
</template>

<script>
// 引入防抖工具
import Debounce from "../utils/utils.js";
// 引入节流工具
import jieliu from "../utils/jieliu.js";
export default {
  props: {},
  data() {
    return {
      username: "",
      password: "",
      token: "321321",
      Allow: false
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    debounceInput(e) {
      Debounce(() => {
        console.log(e.target.value);
      }, 1000);
    },
    jieliushijian(e) {
      jieliu(() => {
        console.log(e.target.value);
      }, 2000);
    },
    returned() {
      this.$router.go(-1);
    },
    sub() {
      let user1 = this.$refs.user1.value;
      let pwd1 = this.$refs.pwd1.value;
      if (user1 == "") {
        this.$toast("用户名不能为空");
        return;
      }
      if (pwd1 == "") {
        this.$toast("密码不能为空");
        return;
      }
      if (localStorage.Account == undefined) {
        this.$toast("该账号不存在,请注册");
        return;
      } else {
        let data = JSON.parse(localStorage.getItem("Account"));
        for (var v of data) {
          if (v.user == user1 && v.pwd == pwd1) {
            this.Allow = true;
          }
        }

        if (this.Allow) {
          this.$toast("登录成功");
          this.password = sessionStorage.setItem("token", this.token);
          this.$router.push("/center");
        } else {
          this.$toast("账号或密码输入错误");
        }
        // for (var i = 0; i < data.length; i++) {
        //   if (data[i].user == user1 && data[i].pwd == pwd1) {
        //     this.$toast("登录成功");
        //     this.password = sessionStorage.setItem("token", this.token);
        //     this.$router.push("/center");
        //     return;
        //   }
        // }
      }
    },
    reg() {
      this.$router.push("/registered");
    }
  },
  components: {}
};
</script>

<style scoped lang='less'>
.login {
  h1 {
    text-align: center;
    margin: 10px 0;
    position: relative;
    img {
      width: 13px;
      position: absolute;
      left: 24px;
      top: 10px;
    }
  }
  table {
    box-sizing: border-box;
    margin: auto;
    padding: 10px 0;
    text-align: right;
    tr {
      margin: 10px;
      td {
        input {
          width: 19rem;
          height: 2.4rem;
        }
      }
    }
  }
}
</style>
